import { Swiper} from "./swiper-bundle.esm.browser.min.js";
import $ from "./jquery.js" ;
import cookie from "./cookie.js" ;
let swiper = new Swiper(".mySwiper", {
    spaceBetween: 30,
    slidesPerView: 1,
    loop: true,
    centeredSlides: true,
    autoplay: {
      delay: 5000,
      disableOnInteraction: false,
    },
    pagination: {
      el: ".swiper-pagination",
      clickable: true,
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
   effect:'fade',
   fadeEffect:{
       crossFade:true,
       
   }
  });
  
  //============================
  $('.app').on('mouseenter',function(){
   
    $('.h-img').stop().slideDown(200)
  
  });
  $('.app').on('mouseleave',function(){
    $('.h-img').stop().slideUp(200)
   });
   $('.r').on('mouseenter',function(){
   
    $('.w1w').stop().slideDown(200)
  
  });
  $('.r').on('mouseleave',function(){
    $('.w1w').stop().slideUp(200)
   });
  //  $(".nav-li>a").hover(function(){
  //    console.log(1)
  //  });
   $('#wq').children().on('mouseenter',function(){
   
    // console.log($(this).index())
    $('.wtw').eq($(this).index()).addClass('show')
    $('.wtw').eq($(this).index()).siblings().removeClass('show')
    
  });
  $('#wq').children().on('mouseleave',function(){
   
   
    $('.wtw').eq($(this).index()).removeClass('show')
   
    
  });
  $('.yyy').on('mouseleave',function(){
    $('.tw1').stop().slideUp(200)
   });
   $('.yyy').on('mouseenter',function(){
   
    $('.tw1').stop().slideDown(200)
  
  });
  $('#re6').on('mouseenter',function(){
    
    $('#r4r').addClass('show')
  });
  $('#re6').on('mouseleave',function(){
    $('#r4r').removeClass('show')
  })
  $('#rtro>a').on('mouseenter',function(){
    $('.tyty').eq($(this).index()).addClass('show');
    $('.tyty').eq($(this).index()).siblings().removeClass('show');
    $(this).addClass('kok');
    $(this).siblings().removeClass('kok');
  })
  $(window).on('scroll',function(){
    let y=$(this).scrollTop();
    if(y>=200){
      $('.p44').css('display','block');
    }else{

      $('.p44').css('display','none');
    }
    if(y>=160){
      $('#s52').stop().slideDown(200);
    }
    if(y<160){
      $('#s52').stop().slideUp(200);
    }
  })
  $('.p44').on('click',function(){
    $(window).scrollTop(0)
  })
  $('.yey').on('mouseenter',function(){
    $('.sds').stop().fadeIn(200);
  })
  $('.yey').on('mouseleave',function(){
    $('.sds').stop().fadeOut(200);
  })
  $('.wtxw').on('click',function(){
    console.log(1)
    $(this).toggleClass('w5x')
  })
  // $('.bb').on('click',function(){
  //   console.log(1)
  // })
  // $('.bb').children('div').click(function(){
  //   $(this).addClass('ii');
  //   $(this).siblings().removeClass('ii');
  // })
  //======================================
  
  //========================================
  let id = location.search.split('=')[1];
console.log(id);

//=========================================

$.ajax({
  url: '../interface/getitem.php',
  type: 'get',
  data: { id },
  dataType: 'json'
}).then(res => {
  //console.log(res)
      let pic = JSON.parse(res.picture);
// console.log(pic)
//     let template = `
//     <h1>商品详情</h1>
//     <h2>${res.title}</h>
//     <div>
//       <img src='./${pic[2].src}'>
//     </div>
//     <div class="price">价格:${res.price}</div>
//     <div>
//       <input type="number" id="num" value="1" min="1" max="${res.num}">
//       <input type="button" value="加入购物车" id="addItem"> 
//     </div>
//     <div>${res.details}</div>
//     `;
let te=`<img src="${pic[1].src}" alt="" style="width:100%"/>`;
    $('.x-t-x').html(te);
 $('.w1w12').text(`${res.title}`) ;
 let rtr=`<span
 >${res.ne1}</span
>${res.nei2}`; 
$('.x-x-t').html(rtr);
$('.w2w').html(`${res.price} 元 <span>${res.price-res.yuanjiagao} 元</span>`);
$('.w11').text(`${res.title}`)
//console.log(res.type);
$('.rwy').text(`${res.price}元`)
let iyi=JSON.parse(res.type);
//console.log(iyi[0].type);
//========================================
let s50=``;
iyi[0].type.forEach((e)=>{
  console.log(e)
  s50+=`<div>${e}</div>`;
  return s50;
})
$('.gt').html(s50);
//=========================================
let w50=``;
iyi[0].color.forEach((e)=>{
  console.log(e)
  w50+=`<div>${e}</div>`;
  return w50;
})
$('.ty').html(w50);
//=========================================
$('.bb').children().eq(0).addClass('ii');
$('.ty').children().eq(0).addClass('ii');
$('.bb').on('click',function(){
  console.log(1)
})
$('.bb').children('div').click(function(){
  $(this).addClass('ii');
  $(this).siblings().removeClass('ii');
})
//=========================
$('.jiaru').click(function(){
  //addItem(res.id,1) 
  addItem(res.id,1) 
 })
//======================================== 
}).catch(err => {
  console.log(err);
});
//==========================

//==========================
function addItem(id, num) {
  let product = { id, num };

  // console.log(product);

  let shop = cookie.get('shop'); // 获取cookie中的shop


  if (shop) { // 判断shop已有数据
      shop = JSON.parse(shop); // shop 字符串转数组

      // 需要判断当前的商品再shop中是否已存在 如果存在则修改数量 不存在则添加
      if (shop.some(el => el.id === id)) { // 判断当前商品存在
          let index = shop.findIndex(elm => elm.id === id); // 找到商品的索引
          let count = parseInt(shop[index].num);
          count += parseInt(num);
          shop[index].num = count;
      } else {
          shop.push(product);
      }

  } else {
      shop = [];
      shop.push(product);
  }

  cookie.set('shop', JSON.stringify(shop));
}































//====================================